<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>差异SQL</title>
		
		<script src="js/vue.js"></script>
		<link rel="stylesheet" href="js/element-ui/lib/theme-chalk/index.css">
		<script src="js/element-ui/lib/index.js"></script>
		<script src="js/axios.js"></script>
		
		<link rel="stylesheet" href="css/common.css">
	</head>
	<body>
		<div id="app">
			<div class="header-panel">
				<div></div>
				<div><h2>{{title}}</h2></div>
				<div style="color: red;">温馨提示：仅供参考，使用前请检查</div>
			</div>
			<div class="container">
				<pre v-for="item in sqlList"><code class="language-sql" style="word-wrap:break-word; white-space: pre-wrap;">{{item}}</code></pre>
			</div>
			<iframe src="component/footer.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"></iframe>
		</div>
		<script src="js/utils.js"></script>
		<link rel="stylesheet" href="js/highlight/vs.min.css">
		<!-- highlight.min.js仅下载了sql语言的 -->
		<script src="js/highlight/highlight.min.js"></script>
		<script>
			let that = new Vue({
				el: '#app',
				data: function () {
					return {
						title:"修正XXX数据库的SQL",
						loading:false,
						sqlList:[],
					}
				},
				methods: {
					getSql(changeKey, targetKey){
						axios.get(`${baseUrl}/api/getSql?changeKey=${changeKey}&targetKey=${targetKey}`).then(response => {
							console.log(response.data);
							let result = response.data.result;
							this.sqlList = result;
							this.$nextTick(()=>{
								// 高亮sql语句
								hljs.highlightAll();
							})
						}).catch(error => {
							console.log(error);
						})
					},
					setTitle(key){
						axios.get(`${baseUrl}/api/list`).then(response => {
							let tableData = response.data.result;
							let res = tableData.filter((obj) => {
							  return obj.key == key;
							});
							this.title = this.title.replace("XXX", res[0].name);
							// document.title = this.title;
						}).catch(error => {
							console.log(error);
						})
					},
				},
				mounted() {
					let changeKey = getUrlParam("changeKey");
					let targetKey = getUrlParam("targetKey");
					this.getSql(changeKey, targetKey);
					this.setTitle(targetKey);
				}
			})
		</script>
	</body>
</html>
